<template>
  <div style="width: 100%; height: 100%">
    <div style="width: 100%; height: 100%" ref="Ech"></div>
  </div>
</template>
<script>
// 应用echarts主题
// import "echarts/theme/macarons.js";
import * as echarts from "echarts";

export default {
  title: "roundBar",
  data() {
    return {
      Echarts: null,
      title: "",
      value: 0,
      colors: [
        "#75bedc",
        "#ef6567",
        "#91cd77",
        "#f9c956",
        "#5470c6",
        "#3692FF",
        "#FF9900",
        "#669933",
        "#990066",
      ],
      seriesData: [],
      config: { legend: {}, graphic: [], title: {} },
      total: null,
    };
  },
  props: {
    titleShow: { type: Boolean, default: false },
    titleCon: {
      type: Object,
      default: () => ({
        valueType: "value",
        subtext: "xx",
        left: "auto",
        top: "auto",
        right: "auto",
        bottom: "auto",
        fontSize: 16,
        suFontSize: 16,
      }),
    },
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      this.Echarts = echarts.init(this.$refs.Ech, "macarons");
      this.drawEchart();
      window.addEventListener("resize", () => {
        //重置容器高宽
        this.Echarts.resize();
      });
    });
  },
  created() {},

  methods: {
    drawEchart() {
      if (!this.Echarts) {
        this.Echarts = echarts.init(this.$refs.ech, "macarons");
      }
      // let tole = 0;
      // if (this.total) {
      //   tole = this.total;
      // } else {
      //   this.seriesData.forEach((val) => {
      //     if (val.data && val.data.length > 0) {
      //       val.data.forEach((item) => {
      //         tole += item.value;
      //       });
      //     }
      //   });
      // }

      var option = {
        color: this.colors,
        title: this.config.title,
        legend: this.config.legend,
        graphic: this.config.graphic,
        toolbox: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(128, 128, 128, 0.8)",
          textStyle: { color: "#fff" },
          formatter: function (params) {
            if (params.name) {
              return `${params.marker} ${params.name} : ${params.value}${params.data.unit} (${params.percent}%)`;
            }
          },
        },

        series: this.seriesData,
      };
      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    },

    getMoney(value) {
      if (!value) return 0;
      const formatter = new Intl.NumberFormat();
      return formatter.format(value);
    },
  },
  beforeDestroy() {
    if (this.Echarts) {
      // 清除实例，释放资源
      this.Echarts.dispose();
      // 将实例设为null，避免潜在的内存泄漏
      this.Echarts = null;
    }
  },
};
</script>
